<template>
  <div id="box">
    <NavBar title="找宠医" />
    <van-search
      v-model="word"
      shape="round"
      ref="search"
      placeholder="搜一搜"
      @search="$router.push('/doctor?word=' + word)"
    />
    <AskIll style="margin: 10px 0" />
    <Symptoms />
    <van-dropdown-menu ref="menu" active-color="#1ec7af">
      <van-dropdown-item
        @change="store.changeParams({ sort_type: value1 })"
        v-model="value1"
        :options="option1"
      />
      <van-dropdown-item
        @change="handleDropdownChange"
        :title="value2 == '' ? '医生擅长' : selectedText"
        v-model="value2"
        :options="option2"
      />
      <van-dropdown-item title="筛选" v-model="value3">
        <div class="downMenu">
          <div class="content" v-for="(val, key) in option3" :key="key">
            <p>{{ key }}</p>
            <div class="btns">
              <van-button
                class="btn"
                v-for="item in val"
                :key="item.name"
                @click="price_column = item.sort_type"
                type="default"
                >{{ item.name }}</van-button
              >
            </div>
          </div>
          <div class="content" v-for="(val, key) in option4" :key="key">
            <p>{{ key }}</p>
            <div class="btns">
              <van-button
                class="btn"
                v-for="item in val"
                :key="item.name"
                @click="
                  (min_price = item.min_price), (max_price = item.max_price)
                "
                type="default"
                >{{ item.name }}</van-button
              >
            </div>
          </div>
          <div class="botm">
            <van-button
              @click="(price_column = ''), (min_price = ''), (max_price = '')"
              type="default"
              style="
                border: none;
                background-color: #fafafa;
                width: 35%;
                border-radius: 30px;
                color: #1ec7af;
              "
              >重置</van-button
            >
            <van-button
              @click="save(), $refs.menu.close()"
              type="success"
              style="
                border: none;
                background-color: #1ec7af;
                width: 62%;
                border-radius: 30px;
              "
              >完成</van-button
            >
          </div>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <DoctorList />
  </div>
</template>
<script setup>
import NavBar from "../../components/NavBar.vue";
import Symptoms from "../../components/Symptoms.vue";
import AskIll from "../../components/Doctor/AskIll.vue";
import DoctorList from "../../components/Doctor/DoctorList.vue";
import { ref } from "vue";
import { useCount } from "../../store";
let store = useCount();
let word = ref("");
let selectedText = ref("");

const value1 = ref("weight");
const value2 = ref("");
const value3 = ref("");
const option1 = [
  { text: "综合排序", value: "weight" },
  { text: "回答次数", value: "case_count" },
  { text: "星级评分", value: "evaluate_score" },
  { text: "响应时间", value: "response_time" },
  { text: "价格从低到高", value: "price_asc" },
  { text: "价格从高到低", value: "price_desc" },
];
const option2 = [
  { text: "全部", value: "" },
  { text: "狗狗", value: "1" },
  { text: "猫咪", value: "2" },
  { text: "小宠", value: "3" },
  { text: "水族", value: "4" },
  { text: "鸟", value: "5" },
  { text: "爬虫", value: "6" },
];
let option3 = {
  问诊方式: [
    { name: "图文问诊", sort_type: "consult_text_price" },
    { name: "电话问诊", sort_type: "consult_call_price" },
  ],
};
let option4 = {
  价格区间: [
    { name: "0-19", min_price: "0", max_price: "1900" },
    { name: "29-49", min_price: "2900", max_price: "4900" },
    { name: "59-99", min_price: "5900", max_price: "9900" },
  ],
};

let handleDropdownChange = (value2) => {
  const selectedOption = option2.find((option) => option.value === value2);
  selectedText.value =
    selectedOption.text == "全部" ? "医生擅长" : selectedOption.text;
  store.changeParams({ class_id: value2 });
};
let price_column = ref("");
let min_price = ref("");
let max_price = ref("");

let save = () => {
  store.changeParams({
    price_column: price_column.value,
    min_price: min_price.value,
    max_price: max_price.value,
  });
};
</script>
<style scoped>
#box {
  padding: 0 30px;
}
.downMenu {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content p {
  font-size: 28px;
}
.btns {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin: 30px 0;
}
.btn {
  background-color: #fafafa;
  border: none;
  margin-right: 30px;
}
.botm {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>